<template>
	<view class="container">
		<view class="ding">
			<view class="ding1">
				<view class="login">
					<image src="/static/logo.png"/>
				</view>
				<view class="xian">
					鲜品直达
				</view>
				
				<!-- 搜索框容器（包含输入框+内部搜索按钮） -->
				<view class="sou-container">
					<view class="sou">
						<input type="text" placeholder="搜索鲜果" v-model="searchValue" />
					</view>
					<!-- 搜索按钮（嵌入搜索框内部右侧） -->
					<view class="search-btn" @click="handleSearch">
						<image src="/static/底部/搜索.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
			<!-- 轮播图容器 -->
			<view class="banner-wrapper">
				<swiper class="banner" 
					indicator-dots="true"
					autoplay="true"
					interval="3000"
					duration="500"
					circular="true"
					indicator-active-color="#ffffff">
					<swiper-item>
						<image src="/static/banner.png" mode="cover" />
					</swiper-item>
					<swiper-item>
						<image src="/static/banner.png" mode="cover" />
					</swiper-item>
				</swiper>
			</view>
		</view>

		<!-- 距离最近 标题（核心修改：绿圈换位置图片） -->
		<view class="distance-title">
			<!-- 新增位置图片 -->
			<image class="location-icon" src="/static/底部/推荐.png" mode="widthFix"></image>
			<text class="title-text">推荐商品</text>
			<view class="title-line"></view>
		</view>

		<view class="product">
			<!-- 循环渲染排序后的商品卡片 -->
			<view class="product-item" v-for="(item, index) in sortedProductList" :key="item.id">
				<!-- 商品图片 -->
				<image class="product-img" :src="item.imgUrl" mode="widthFix"></image>
				<!-- 商品信息区域（名称+距离并排） -->
				<view class="product-info">
					<!-- 名称+距离 并排容器 -->
					<view class="product-header">
						<text class="product-name">{{ item.name }}</text>
						
					</view>
					<text class="product-tag">原价:{{ item.tag }}</text>
					<view class="product-bottom">
						<text class="product-price">¥{{ item.price }}</text>
						<view class="cart-btn">
							<image src="/static/购物车满.png" mode="widthFix"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activeTab: 0,
				searchValue: '', // 存储搜索输入值
				// 原始商品数据（后续可替换为接口返回数据）
				productList: [
					{ id: 1, name: '进口红富士苹果', distance: '80m', price: 58, tag: '3.00元', imgUrl:'/static/板栗.png' },
					{ id: 2, name: '阳光玫瑰葡萄', distance: '10m', price: 88, tag: '4.00元', imgUrl:'/static/板栗.png' },
					{ id: 3, name: '无籽麒麟西瓜', distance: '200m', price: 68, tag: '2.50元' , imgUrl:'/static/板栗.png'},
					{ id: 4, name: '突尼斯软籽石榴', distance: '320m', price: 76, tag: '3.50元' , imgUrl:'/static/板栗.png'},
					{ id: 5, name: '新西兰奇异果', distance: '450m', price: 98, tag: '5.00元' , imgUrl:'/static/板栗.png'},
					{ id: 6, name: '广西沃柑', distance: '580m', price: 45, tag: '2.00元' , imgUrl:'/static/板栗.png'}
				]
			};
		},
		computed: {
			// 计算属性：返回按距离升序排序后的商品列表
			sortedProductList() {
				// 复制原始数组（避免修改原数据），然后排序
				return [...this.productList].sort((a, b) => {
					// 提取距离中的数字（去掉 "m"），转为数字类型后比较
					const distanceA = Number(a.distance.replace('m', ''));
					const distanceB = Number(b.distance.replace('m', ''));
					// 升序排序（小的在前，距离近的靠前）
					return distanceA - distanceB;
				});
			}
		},
		methods: {
			// 搜索按钮点击事件
			handleSearch() {
				console.log('搜索内容：', this.searchValue || '搜索鲜果');
				if (!this.searchValue) {
					uni.showToast({ title: '请输入搜索内容', icon: 'none' });
				} else {
					// 实际项目中可添加接口请求或页面跳转逻辑
					// 如果搜索后需要重新排序，只需更新 productList 即可（computed 会自动重新计算）
				}
			}
		}
	};
</script>

<style lang="css">
	/* 外层容器样式 */
	.container {
	  padding-bottom: 120rpx;
	  min-height: 100vh;
	  box-sizing: border-box;
	}

	/* 顶部区域样式 */
	.ding {
	  background-color: #66cc00;
	  width: 100%;
	  height: auto;
	  border-radius: 0 0 100rpx 100rpx;
	  padding-bottom: 40rpx;
	}
	.ding .ding1 {
	  height: 100rpx;
	  display: flex;
	  align-items: center;
	  padding: 0 20rpx;
	  padding-top: 10rpx;
	}
	.ding .ding1 view {
	  margin: 0 5rpx;
	}
	.ding .ding1 .login image {
	  width: 70rpx;
	  height: 70rpx;
	  border-radius: 50%;
	}
	.ding .ding1 .xian {
	  color: white;
	  font-family: "黑体";
	  font-size: 30rpx;
	  -webkit-text-stroke: 1rpx white;
	  margin-right: 100rpx;
	}

	/* 搜索框容器 */
	.sou-container {
		position: relative; /* 作为按钮定位的参考 */
		width: 350rpx; /* 保持原搜索框宽度不变 */
	}
	.ding .ding1 .sou {
	  width: 100%; /* 占满容器宽度 */
	  background-color: white;
	  border-radius: 30rpx; /* 保持原圆角 */
	  padding: 0 20rpx;
	  margin-right: 0; /* 取消右边距，因为按钮在内部 */
	}
	.ding .ding1 .sou input {
	  width: 100%;
	  height: 60rpx;
	  font-size: 20rpx;
	  color: #333;
	  background: transparent;
	  border: none;
	  outline: none;
	  padding-right: 60rpx; /* 给右侧按钮留空间，避免文字被遮挡 */
	}
	.ding .ding1 .sou input::placeholder {
	  color: #999;
	  font-size: 26rpx;
	}

	/* 搜索按钮（嵌入搜索框内部右侧） */
	.search-btn {
		position: absolute; /* 绝对定位到容器右侧 */
		right: 0rpx; /* 距离右侧10rpx */
		top: 50%;
		transform: translateY(-50%); /* 垂直居中 */
		width: 40rpx;
		height: 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.search-btn image {
		width: 28rpx;
		height: 28rpx;
	}

	/* 轮播图样式 */
	.ding .banner-wrapper {
	  width: 80%;
	  height: 240rpx;
	  margin: 0 auto;
	  border-radius: 5%;
	  overflow: hidden;
	}
	.ding .banner {
	  width: 100%;
	  height: 100%;
	}
	.ding .banner image {
	  width: 100%;
	  height: 100%;
	  object-fit: cover;
	}

	/* 距离最近 标题样式（核心修改） */
	.distance-title {
	  display: flex;
	  align-items: center;
	  padding: 20rpx 30rpx;
	  background-color: #f2f2f2; /* 与商品区域背景一致 */
	  margin-top: 50rpx;
	}
	/* 位置图标样式 */
	.location-icon {
		width: 70rpx; /* 图标宽度，可根据实际图标调整 */
		height: 70rpx; /* 图标高度，可根据实际图标调整 */
		margin-right: 15rpx; /* 图标与文字间距 */
		color: #66cc00; /* 若图标是矢量图，可设置颜色与主题色一致 */
	}
	.title-text {
	  font-size: 35rpx;
	  font-weight: 900;
	  color: #333;
	  margin-right: 15rpx;
	  /* 删除原伪元素相关样式 */
	}
	/* 标题右侧分割线 */
	.title-line {
	  flex: 1;
	  height: 2rpx;
	  background-color: #e5e5e5; /* 浅灰色分割线，不突兀 */
	}

	/* 商品模块样式 */
	.product {
		background-color: #f2f2f2;
		width: 100%;
		box-sizing: border-box;
		display: grid;
		grid-template-columns: repeat(2, 45%);
		justify-content: center;
		gap: 20rpx;
		padding: 20rpx 0;
	}

	.product-item {
		background-color: #fff;
		border-radius: 20rpx;
		overflow: hidden;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.product-img {
		width: 100%;
		height: 280rpx;
		object-fit: cover;
	}

	.product-info {
		padding: 15rpx 20rpx;
	}

	/* 新增：名称+距离 并排容器样式 */
	.product-header {
		display: flex;
		justify-content: space-between; /* 左右对齐 */
		align-items: center; /* 垂直居中 */
		margin-bottom: 8rpx; /* 与下方标签保持间距 */
	}

	.product-name {
		font-size: 28rpx;
		color: #333;
		font-weight: 500;
		/* 限制名称最大宽度，避免过长挤压距离 */
		max-width: 200rpx;
		white-space: nowrap; /* 不换行 */
		overflow: hidden; /* 超出隐藏 */
		text-overflow: ellipsis; /* 超出显示省略号 */
	}

	/* 距离样式（居右、主题色） */
	.product-distance {
		font-size: 24rpx;
		color: #66cc00; /* 主题绿色，突出显示 */
		font-weight: 500;
	}

	.product-tag {
		display: block;
		font-size: 24rpx;
		color: #999;
		margin: 8rpx 0;
		text-decoration: line-through;
	}

	.product-bottom {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 10rpx;
	}

	.product-price {
		font-size: 30rpx;
		color: #ff3333;
		font-weight: 700;
	}

	.cart-btn {
		width: 50rpx;
		height: 50rpx;
		background-color:#66cc00;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.cart-btn image {
		width: 30rpx;
		height: 30rpx;
	}
</style>